<script>
  import "@/assets/common/base.css"
  import leftBar from '@/components/leftBar';
  import chooseTheme from '@/components/chooseTheme';
  import chooseDate from '@/components/chooseDate';
  import topHeader from '@/components/topHeader';
  import billList from '@/components/billList';
  import chooseThemeDialog from "@/components/chooseThemeDialog";
  import { basicDataTest,shopDataTest,themeDataTest,dateDataTest,listDataTest,themeListDataTest } from "@/common/data.js";
  const { Fetch } = require("@/common/fetch");
  const _dev_ = false;
  const basicData = Fetch('/admin/finance/api/page.php?action=get_base');
  const themeData = Fetch('/admin/finance/api/page.php?action=get_all_shop_theme');
  export default {
    name: "Bill",
    components:{leftBar,topHeader,chooseTheme,chooseDate,billList,chooseThemeDialog},
    data(){
      return{
        switchThemeVisible:false,
        left_menu:_dev_ ? basicDataTest.left_menu : [],//左侧导航数据
        topHeader:_dev_ ? basicDataTest.user : {},     //用户信息
        themeList:_dev_ ? themeListDataTest :[],        //主题数据
        checkedThemes:[],
        themeIds:[],
        billList:[],
        page:1,
        page_num:10,
        total:0,
        downLoadLink:''
      }
    },
    methods:{
      chooseTheme(){
        this.switchThemeVisible = true;
      },
      uploadThemes(arr){
        this.switchThemeVisible = false;
        const themeArr = [],themeIds = [];
        if(arr && arr.length){
          arr.forEach((item)=>{
            if(item.theme_info.length){
              themeArr.push(item);
              item.theme_info.forEach((list)=>{
                themeIds.push(list.theme_id);
              })
            }
          })
        }
        this.checkedThemes = themeArr;
        this.themeIds = themeIds;
      },
      getList(obj){
        let dateOpt = this.$refs['date'].getDate(),
              self = this;
        if(!dateOpt){
          this.$message('请选择日期');
          return;
        }
        if(!this.themeIds.length){
          this.$message('请选择主题');
          return;
        }
        this.page = obj && obj.page;
        Fetch(`/admin/finance/api/theme.php?action=get_theme_statistics&start_date=${dateOpt.start}&end_date=${dateOpt.end}&theme_ids=${this.themeIds.join(',')}&page=${this.page}&page_num=${this.page_num}`).then((res)=>{
          if(res && res.data){
            self.billList = res.data;
            self.total = res.count;
          }
        }).catch((err)=>{

        });
      },
      downLoad(){
        const dateOpt = this.$refs['date'].getDate();
        if(!dateOpt){
          this.$message('请选择至少一个有效日期');
          return;
        }
        if(!this.themeIds.length){
          this.$message('请选择至少一家门店的一个主题\n');
          return;
        }
        window.open(`/admin/finance/api/theme.php?action=get_theme_statistics&start_date=${dateOpt.start}&end_date=${dateOpt.end}&theme_ids=${this.themeIds.join(',')}&download=1`);

      }
    },
    mounted(){
      basicData.then((response)=>{
        const {left_menu,user}  = response.data;
        this.left_menu = left_menu;
        this.topHeader= user;
      });

      themeData.then((response)=>{
        if(response.data){
          this.themeList = response.data;
        }
      });
    }

  }
</script>

<template>
  <div id="bill">
    <el-container>
      <el-aside width="170px">
        <leftBar :parcel="left_menu"/>
      </el-aside>

      <el-container>
        <el-header height="80px">
          <topHeader :parcel="topHeader"/>
        </el-header>
        <el-main class="m-container">
          <chooseTheme @upload="chooseTheme" :parcel="checkedThemes"></chooseTheme>
          <div class="m-controler" >
            <h2 class="title">STEP1.选择日期</h2>
            <div class="controler-box">
              <div class="m-date">
                <chooseDate ref="date"></chooseDate>
              </div>
            </div>
          </div>

          <div class="m-button">
            <div class="m-btn" @click="getList">生成场次表</div>
            <div class="m-btn" @click="downLoad">导出全部</div>
          </div>
          <billList :parcel="billList" @upload="getList" :total="total"></billList>
        </el-main>
      </el-container>
      <chooseThemeDialog :parcel="themeList" :switchThemeVisible="switchThemeVisible" @upload="uploadThemes"></chooseThemeDialog>
    </el-container>
  </div>
</template>

<style scoped  lang = "scss">
  #bill {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: #F2F2F2;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
  }
  .el-main{padding:30px}
  .el-header{padding:0;}
  .m-button{
    text-align: center;
    .m-btn{
      display: inline-block;
      padding:5px 30px;
      background: #FF679E;
      border-radius: 101px;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #FFFFFF;
      letter-spacing: 0;
      line-height: 28px;
      margin:30px 10px;
    }
  }
  .m-controler {

    .title {
      font-family: PingFangSC-Medium;
      font-size: 20px;
      color: #000000;
      letter-spacing: 0;
      display: inline-block;
      margin: 10px 0 27px;
      line-height: 1;
    }

    .m-btn {
      display: inline-block;
      background: #FFED8C;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #000000;
      letter-spacing: 0;
      border-radius: 100px;
      padding: 5px 10px;
      cursor: pointer;
      margin-left: 10px
    }

    .controler-box {
      background: #FFFFFF;
      box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.15);
      padding: 30px;
    }

  }
</style>
